<template>
  <div id='editorSection'></div>
</template>

<script lang='ts'>
import Editor from 'tui-editor'/* ES6 */
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'codemirror/lib/codemirror.css'
import 'highlight.js/styles/github.css'
import Vue from 'vue'

export default Vue.extend({
  name: 'MarkDownEditor',
  data () {
    return {
      editor: null,
      content: '123123123'
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  mounted () {
    this.initialize()
    // this.tuieditor.mdEditor.editorContainerEl.childNodes[0].childNodes[0].style.width = '100%'
  },
  methods: {
    initialize () {
      const instance = new Editor({
        el: document.querySelector('#editorSection') as HTMLElement,
        // initialValue: value,
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        height: '300px'
      }) as any
      setTimeout(() => {
        instance.mdEditor.editorContainerEl.childNodes[0].style.width = '50%'
        instance.mdEditor.editorContainerEl.childNodes[0].childNodes[0].style.width = '100%'
      }, 0)
      this.editor = instance
    },
    getValue () {
      return (this.editor as any).getHtml()
    },
    setValue (val: string) {
      (this.editor as any).setHtml(val)
    }
  }
})
</script>

<style lang='scss' scoped>
// #editorSection {
//     width: 100%;
// }
.te-md-splitter {
    widows: 50%;
}
</style>
